<!--
 * @Descripttion: 
 * @version: 
 * @Author: xcb
 * @Date: 2021-03-16 09:48:46
 * @LastEditors: gzy 810461372@qq.com
 * @LastEditTime: 2023-09-22 17:34:57
-->
<template>
  <el-container style="height: 100%; padding: 10px">
    <el-aside
      width="350px"
      style="overflow: hidden; padding-right: 10px; padding-bottom: 10px"
    >
      <el-card class="box-card" style="height: 100%">
        <SideForm />
      </el-card>
    </el-aside>

    <el-main
      style="
        padding: 0 10px 10px 10px;
        margin-left: 15px;
        height: 100%;
        background-color: hsla(0, 0%, 100%, 0.3);
        border-radius: 4px;
        overflow: hidden;
      "
    >
      <div v-show="pageType === '初始化参数'" style="height: 100%">
        <SedimentParam />
      </div>
      <div v-show="pageType === '边界条件'" style="height: 100%">
        <BoundaryCondition />
      </div>
      <div v-show="pageType === '调度方案'" style="height: 100%">
        <DispatchingScheme />
      </div>
      <!-- <div v-show="pageType === '河道断面'" style="height: 100%">
        <ChannelSection />
      </div> -->
      <div v-show="pageType === '泥沙参数'" style="height: 100%">
        <SedParam />
      </div>
      <div v-show="pageType === '关系图'" style="height: 100%">
        <VisTree />
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import {
  ref,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  provide,
  watch,
} from "vue";
import { useStore } from "vuex";

import { useRoute, useRouter } from "vue-router";

import moment from "moment";

import { verifyPlannoOfUser } from "@/request/api";

import SideForm from "./SideForm.vue";
import SedimentParam from "./sedimentParam.vue";
import BoundaryCondition from "./boundaryCondition/index.vue";
import DispatchingScheme from "./boundaryCondition/dispatchingScheme.vue";
// import ChannelSection from "./channelSection/index.vue";
import SedParam from "./sedParam.vue";
import VisTree from "./visTree.vue";

export default defineComponent({
  name: "Headers",
  components: {
    // 方案信息
    SideForm,
    // 初始化参数
    SedimentParam,
    // 边界条件
    BoundaryCondition,
    // 调度方案
    DispatchingScheme,
    // 河道断面
    // ChannelSection,
    // 泥沙参数
    SedParam,
    // 关系图
    VisTree,
  },
  setup: () => {
    const route = useRoute();
    const store = useStore();

    const state = reactive({});

    // 边界条件数据
    const boundaryConditionData = reactive({});

    // 边界条件站点树状图数据
    const boundaryConditionTreeData = reactive({
      // 站点树状图所选站点
      treeSelect: {
        key: "",
        type: "",
        stcd: "",
      },
      // 站点树状图所选站点stcd
      treeSelectStcd: [],
      // 站点树状图数据
      treeData: [],
    });

    // 坝前水位数据
    const schemePresetData = reactive({});

    // 方案基础信息
    const planMsgForm = reactive({
      planName: "",
      planRemark: "",
    });

    // 方案参数信息
    let planDataMsgForm = reactive({
      // 方案id
      planno: "modelTemp",
      // 方案所选库区
      selectReservoir: "长江中下游",
      // 参数方案选择
      selectParamPlan: "",
      // 降雨量模型选择
      selectRainModelPlan: "",
      // 方案时间
      dateTime: [
        moment().subtract(7, "days").format("YYYY-MM-DD 00:00:00"),
        moment().add(3, "days").format("YYYY-MM-DD 23:59:59"),
      ],
      // 预测天数
      predictDay: 3,
      // 当前方案为新增还是修改
      isEdit: false,
      // 当前方案是否为该用户创建
      verifyUser: true,
    });

    // 初始化参数
    const mainData = reactive({
      // 时间参数
      timeData: {
        step: "",
        xscdStep: "",
        stcdStep: "",
        offsets: "",
        roughness: "",
      },
      // 泥沙参数
      sedData: {},
    });

    // 目前展示页面
    const pageType = ref("初始化参数");

    watch(
      () => planDataMsgForm,
      (value, prevCount) => {
        if (moment().isAfter(moment(value.dateTime[1]), "days")) {
          value.predictDay = 0;
        } else {
          value.predictDay = moment(value.dateTime[1]).diff(
            moment().format("YYYY-MM-DD"),
            "days"
          );
        }
      },
      { deep: true }
    );

    // 方案基础信息
    provide("planMsgForm", planMsgForm);
    // 方案参数信息
    provide("planDataMsgForm", planDataMsgForm);

    // 所选页面
    provide("pageType", pageType);

    // 初始化参数
    provide("mainData", mainData);

    // 边界条件数据
    provide("boundaryConditionData", boundaryConditionData);

    // 边界条件树状图数据
    provide("boundaryConditionTreeData", boundaryConditionTreeData);

    // 边界条件数据
    provide("schemePresetData", schemePresetData);

    onMounted(() => {
      // 路由传参
      const routerParams: any = route.params;

      if (routerParams.addType === "1") {
        planDataMsgForm.selectReservoir = "三峡库区"; // 计算库区

        store.state.reiverList = [
          {
            reservoir: "三峡库区",
            river: "长江(三峡库区)",
            disabled: false,
          },
          {
            reservoir: "两坝间",
            river: "长江(两坝间)",
            disabled: false
          },
          {
            reservoir: "溪洛渡库区",
            river: "金沙江(溪洛渡库区)",
            disabled: false,
          },
          {
            reservoir: "向家坝库区",
            river: "金沙江(向家坝库区)",
            disabled: false,
          },
          {
            reservoir: "乌东德库区",
            river: "金沙江(乌东德库区)",
            disabled: false,
          },
          {
            reservoir: "白鹤滩库区",
            river: "金沙江(白鹤滩库区)",
            disabled: false,
          },
        ];
      } else {
        planDataMsgForm.selectReservoir = "长江中下游"; // 计算库区

        store.state.reiverList = [
          {
            reservoir: "长江中下游",
            river: "长江(长江中下游)",
            disabled: false,
          },
        ];
      }

      if (route.params.isEdit === "true") {
        planMsgForm.planName = routerParams.planName; // 方案名称
        planDataMsgForm.planno = routerParams.planno; // 方案id
        planDataMsgForm.selectReservoir = routerParams.address; // 计算库区
        planDataMsgForm.selectParamPlan = routerParams.argumentsid; // 计算库区
        planDataMsgForm.selectRainModelPlan = routerParams.selectRainModelPlan; // 计算库区
        planDataMsgForm.dateTime = [
          moment(routerParams.startDate).format("YYYY-MM-DD HH:ss:mm"),
          moment(routerParams.endDate).format("YYYY-MM-DD HH:ss:mm"),
        ]; // 方案计算起止时间

        verifyPlan(routerParams.planno);
      }
    });

    /**
     * @description: 验证方案是否为当前用户创建
     * @param {*} planno 当前方案ID
     * @return {*}
     */
    function verifyPlan(planno) {
      verifyPlannoOfUser({
        planno,
        userid: "cf4092ad-27ac-42da-9346-b3de7c730758",
        // import.meta.env.DEV
        //   ? "cf4092ad-27ac-42da-9346-b3de7c730758"
        //   : JSON.parse(localStorage.getItem("userList")).token,
      }).then((res: any) => {
        if (res.code === "200") {
          planDataMsgForm.verifyUser = true;
        }
      });
    }

    return {
      ...toRefs(state),

      pageType,
    };
  },
});
</script>

<style scoped lang="less"></style>
